<template>
  <div class="table-box-body">
    <table width="100%" border="1">
      <tr>
        <!--        rowspan 高度-->
        <td class="td-time">陪餐日期</td>
        <td>陪餐类型</td>
        <td>试餐时间/陪餐时间</td>
        <td>陪餐班级</td>
        <td>陪餐人员</td>
        <td>食谱名称</td>
        <td>试餐情况</td>
        <td>陪餐情况</td>
        <td>本周情况描述</td>
      </tr>
      <template v-for="item in 5">
        <template v-if="foodDay[item-1]">
          <!--            第一行 item_tr 1 2 3-->
          <tr v-for="item_tr in dish_type.length" :key="`${item}${item_tr}`">
            <!--            v-if="foodDay[item - 1].list[item_tr-1]"-->
            <template>
              <td :rowspan="dish_type.length" v-if="item_tr==1">
                {{ foodDay[item - 1].time }}
                {{ weekName[foodDay[item - 1].weekName] }}
              </td>
              <td>{{ foodType[item_tr] }}</td>
              <td @click="editTime(foodDay[item - 1].list[item_tr - 1])" class="timeLine">
                {{ foodDay[item - 1].list[item_tr - 1].eat_time }}
                /
                {{ foodDay[item - 1].list[item_tr - 1].create_time }}
              </td>
              <td v-for="item_td in 3" :key="`class${item}${item_tr}${item_td}`">
                    <span v-if="item_td==1">{{
                        foodDay[item - 1].list[item_tr - 1].classes ? foodDay[item - 1].list[item_tr - 1].classes.class_name : ''
                      }}</span>
<!--                <span v-if="item_td==2">{{-->
<!--                    foodDay[item - 1].list[item_tr - 1].user ? foodDay[item - 1].list[item_tr - 1].user.realname : ''-->
<!--                  }}</span>-->
                <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover" v-if="item_td==2">
                  <div class="avatar-wrapper">
                    <span class="morelink">{{
                        foodDay[item - 1].list[item_tr - 1].user ? foodDay[item - 1].list[item_tr - 1].user.realname : '--'
                      }}</span>
                    <i class="el-icon-caret-bottom"/>
                  </div>
                  <el-dropdown-menu slot="dropdown" >
                    <el-dropdown-item @click.native="detelFood(foodDay[item - 1].list[item_tr - 1])">
                      <span>删除记录</span>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <span v-if="item_td==3"><i
                    v-for="item in foodDay[item - 1].list[item_tr-1].release_dish_ids">{{ item.name }},</i></span>
              </td>
              <td></td>
              <td></td>
              <td :rowspan="dish_type.length*5" v-if="item==1 && item_tr==1">
                {{ weekContent }}
                <el-button size="mini" @click="showWeekFn" v-if="!weekContent">编辑</el-button>
              </td>
            </template>
          </tr>
        </template>
        <template v-else>
          <!--            第一行-->
          <tr v-for="item_tr in dish_type.length" :key="`${item}${item_tr}`">
            <td :rowspan="dish_type.length" v-if="item_tr==1"></td>
            <td>{{ foodType[item_tr] }}</td>
            <td></td>
            <td v-for="item_td in 5" :key="`tr${item}${item_tr}${item_td}`"></td>
            <td :rowspan="dish_type.length*5" v-if="item==1&&item_tr==1">
              {{ weekContent }}
              <el-button size="mini" @click="showWeekFn" v-if="!weekContent">编辑</el-button>
            </td>
          </tr>
        </template>
      </template>
    </table>
    <editEatTime :visible.sync="timeStatus" :foodOption="foodOption" @initHome="initHome"></editEatTime>
  </div>
</template>

<script>
import editEatTime from "./editEatTime"

export default {
  props: ['foodDay', 'foodType', 'weekName', 'weekContent', 'dish_type'],
  name: "weekTable",
  components: {editEatTime},
  data() {
    return {
      timeStatus: false,
      foodOption: null
    }
  },
  methods: {
    showWeekFn() {
      this.$emit('showWeekFn')
    },
    initHome(){
      this.$emit('getIndexFn')
    },
    editTime(option) {
      this.foodOption = option
      this.timeStatus = true
    },
    detelFood(option){
      this.$emit('dishdelete', option)
    }
  }
}
</script>

<style scoped>
table {
  border-collapse: collapse;
}

table th {
  height: 50px;
}

table td {
  padding: 5px;
  text-align: center;
  font-size: 12px;
}

table td em {
  font-style: normal;
  font-size: 16px;
}

table td i {
  font-style: normal;
  font-size: 12px;
}

.table-title {
  margin-bottom: 10px;
}

.table-title span {
  font-weight: bold;
}

.td-01 {
  width: 80px;
}

.td-02 {
  width: 133px;
}

.td-40 {
  width: 40px
}

.td-50 {
  width: 50px
}

.tips-day-list {
  padding: 10px 0 20px;
  text-align: center;
}

.td-time {
  width: 80px
}

.timeLine {
  cursor: pointer;
}

.timeLine:hover {
  font-weight: bold;
  color: #006dcd;
  text-decoration: underline;
}
</style>
